<template>
    <div id="wbgl" ref="wbgl"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three';

const wbgl = ref();
const init = () => {
    /** 一、创建一个三维场景 */
    const scene = new THREE.Scene();
    //给三维场景添加物体
    // 1. 创建一个几何体
    const geometry = new THREE.BoxGeometry(28, 28, 28);
    // 2. 创建一个材质
    const material = new THREE.MeshBasicMaterial({ color: 0xee3300 }); //基础网格材质(MeshBasicMaterial)
    // 3. 创建一个网格模型，也就是你要创建的物体，包括形状（geometry）和表面材质（material）
    const mesh = new THREE.Mesh(geometry, material); // 网格（Mesh）
    mesh.position.set(0, 0, 0); // 设置网格模型的位置
    // 4. 将网格模型添加到三维场景中
    scene.add(mesh);

    /** 二、创建一个投影相机 */
    /**
     * PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
     * fov — 摄像机视锥体垂直视野角度
     * aspect — 摄像机视锥体长宽比
     * near — 摄像机视锥体近端面
     * far — 摄像机视锥体远端面
     */
    // 定义相机输出的画布尺寸
    const width = 800;
    const height = 500;
    // 创建一个透视相机
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2000); // 透视相机（PerspectiveCamera）
    // 设置相机的位置
    camera.position.set(200, 200, 200);
    // 设置相机的观察点
    // camera.lookAt(0, 0, 0);  // 坐标定义观察点
    camera.lookAt(mesh.position); // 指向具体的模型
    // 将相机添加到三维场景中
    scene.add(camera);

    /** 三、WebGLRenderer渲染器-渲染出物体 */
    // 创建一个渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器的尺寸
    renderer.setSize(width, height);
    // 渲染三维场景
    renderer.render(scene, camera);

    // 将渲染器的输出canvas添加到页面中
    wbgl.value.appendChild(renderer.domElement);
}

onMounted(() => {
    init();
})


</script>
<style scoped lang='scss'>
    
</style>